<template>
  <div class="uploadPic">
    <!-- 头部导航栏 -->
    <van-nav-bar style="background-color: #fff" title="发布" />
    <!-- 相册描述区 -->
    <div class="writeCon">
      <van-field
        v-model="pic_msg"
        rows="4"
        autosize
        type="textarea"
        placeholder="说说今天的话..."
        class="field_con"
      />
    </div>
    <!-- 选择相片 -->
    <div class="select_pic">
      <uploader @func="getPicUrl"></uploader>
    </div>
    <!-- 黑线 -->
    <div class="liner"></div>
    <!-- 选择 -->
    <div class="select">
      <van-row>
        <van-field
          readonly
          clickable
          label="发布到"
          :value="upload_value"
          placeholder="首页"
          @click="showUploadPicker = true"
        />
        <van-popup v-model="showUploadPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columnsPath"
            @cancel="showUploadPicker = false"
            @confirm="onUploadConfirm"
          />
        </van-popup>
      </van-row>
      <van-row>
        <van-field
          readonly
          clickable
          label="相册权限"
          :value="power_value"
          placeholder="公开·默认"
          @click="showPowerPicker = true"
        />
        <van-popup v-model="showPowerPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columnsPower"
            @cancel="showPowerPicker = false"
            @confirm="onPowerConfirm"
          />
        </van-popup>
      </van-row>
    </div>
    <!-- 提交 -->
    <van-button color="#f1bf83" @click="btn_success" block>发布</van-button>
  </div>
</template>

<script>
import uploader from "../../components/common/uploader.vue";
export default {
  components: { uploader },
  data() {
    return {
      pic_url: "",
      //相片描述
      pic_msg: "",
      //选择相册的值
      upload_value: "",
      //相册权限值
      power_value: "",
      //是否展示pop
      showUploadPicker: false,
      showPowerPicker: false,
      //相册选择的范围
      columnsPath: ["首页"],
      //相册公布的范围
      columnsPower: ["私密", "公开"],
      //存储的相册文件
      fileList: [],
    };
  },
  created() {
    this.album_id = this.$store.state.album_id;
  },
  methods: {
    onUploadConfirm(upload_value) {
      this.upload_value = upload_value;
      // console.log(upload_value);
      this.showUploadPicker = false;
    },
    onPowerConfirm(power_value) {
      this.power_value = power_value;
      this.showPowerPicker = false;
    },
    getPicUrl(data) {
      this.pic_url = data;
    },
    async btn_success() {
      //提交到七牛云
      const res = await this.request.post("/public", {
        pub_img: this.pic_url,
        pub_des: this.pic_msg,
      });
      console.log(res);
      if (res.status != 0) {
        return this.$toast("上传失败");
      } else {
        this.$toast.success("上传成功");
        this.$router.push({ path: "/index" });
      }
    },
  },
};
</script>

<style lang="less" scopd>
.uploadPic {
  width: 750rpx;
  height: 100%;
  margin: 0 auto;
  .writeCon {
    /deep/.field_con .van-field__control {
      border: 2px solid #ccc;
      border-radius: 5px;
    }
  }
  .liner {
    width: 100%;
    height: 10px;
    background-color: #eee;
  }
  .select {
    width: 90%;
    height: 250px;
    margin: 0 auto;
  }
  .select_pic {
    margin-top: 30px;
    width: 80%;
    height: 100%;
    margin: 0 auto;
  }
}
</style>